<template>
  <div class="vbox flex1">
    <div class="tabs-header tab-nav-header" v-if="tabs && tabs.length>0">
      <div class="tags-nav">
        <div class="close-con">
          <el-dropdown>
            <i class="el-icon-circle-close-outline tags-btn"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>关闭所有</el-dropdown-item>
              <el-dropdown-item>关闭其他</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div class="btn-con left-btn" @click="handleScroll(240)">
          <i class="el-icon-arrow-left tags-btn"></i>
        </div>
        <div class="btn-con right-btn" @click="handleScroll(-240)">
          <i class="el-icon-arrow-right tags-btn"></i>
        </div>
        <div
          class="scroll-outer"
          ref="scrollOuter"
          @DOMMouseScroll="handlescroll"
          @mousewheel="handlescroll"
        >
          <div class="scroll-body" ref="scrollBody" :style="{left: tagBodyLeft + 'px'}">
            <div
              class="tab-title"
              v-for="item in tabs"
              :key="item.code"
              :label="item.name"
              :name="item.code"
              @click="setActive(item.code)"
            >
              <span :class="['tab-dot-inner',item.code == activeTab ? 'primary' : '']"></span>
              <span class="tab-text" v-text="item.name"></span>
              <i
                v-if="item.code!='index'"
                class="el-icon-close tab-close"
                @click.stop="removeTab(item.code)"
              ></i>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      style="padding:8px;background:rgba(245,247,249,1);padding-top:45px;overflow-y:hidden"
      class="vbox flex1"
    >
      <!-- <transition name="el-zoom-in-center"> -->
      <keep-alive>
        <component v-if="curComponent" :is="curComponent" :view="view" :extra-data="extraData"></component>
      </keep-alive>
      <!-- </transition> -->
    </div>
  </div>
</template>

<script>
import Index from "../views/Index";
export default {
  computed: {
    activeTab: {
      get() {
        return this.$store.state.activeTab;
      },
      set(v) {
        this.$store.commit("setActiveTab", v);
      }
    },
    tabs: {
      get() {
        return this.$store.state.tabs;
      },
      set(tabs) {
        this.$store.commit("setTabs", tabs);
      }
    }
  },
  data() {
    return {
      tagBodyLeft: 0,
      curComponent: Index,
      extraData: {},
      view: false
    };
  },
  created() {
    if (this.activeTab) {
      this.setActive(this.activeTab);
    }
  },
  methods: {
    setActive(code) {
      let me = this;
      let findTab = me.tabs.find(item => {
        return item.code == code;
      });
      me.curComponent = resolve =>
        require([`@/views/${findTab.resPath}`], resolve);
      me.activeTab = code;
    },
    handlescroll(e) {
      var type = e.type;
      let delta = 0;
      if (type === "DOMMouseScroll" || type === "mousewheel") {
        delta = e.wheelDelta ? e.wheelDelta : -(e.detail || 0) * 40;
      }
      this.handleScroll(delta);
    },
    handleScroll(offset) {
      const outerWidth = this.$refs.scrollOuter.offsetWidth;
      const bodyWidth = this.$refs.scrollBody.offsetWidth;
      if (offset > 0) {
        this.tagBodyLeft = Math.min(0, this.tagBodyLeft + offset);
      } else {
        if (outerWidth < bodyWidth) {
          if (this.tagBodyLeft < -(bodyWidth - outerWidth)) {
            this.tagBodyLeft = this.tagBodyLeft;
          } else {
            this.tagBodyLeft = Math.max(
              this.tagBodyLeft + offset,
              outerWidth - bodyWidth
            );
          }
        } else {
          this.tagBodyLeft = 0;
        }
      }
    },
    removeTab(tabCode) {
      let me = this;
      let findTabIndex = me.tabs.findIndex(item => {
        return item.code == tabCode;
      });
      console.log(tabCode, findTabIndex);
      if (findTabIndex == 0) {
        if (me.tabs.length > 1) {
          let resPath = me.tabs[1].resPath;
          let lastCode = me.tabs[1].code;
          me.activeTab = lastCode;
          me.tabs.splice(0, 1);
          me.curComponent = resolve => require([`@/views/${resPath}`], resolve);
        } else {
          me.tabs = [];
          me.curComponent = null;
          me.activeTab = "";
        }
      } else if (findTabIndex > 0) {
        let tab = me.tabs[findTabIndex - 1].code;
        let findTab = me.tabs.find(item => {
          return item.code == tab;
        });
        let oldTab = Object.assign({}, findTab);
        me.tabs.splice(findTabIndex, 1);
        me.curComponent = resolve =>
          require([`@/views/${oldTab.resPath}`], resolve);
        me.activeTab = tab;
      }
    },
    addTab(tabCode, findRes) {
      let me = this;
      let findTab = me.tabs.find(item => {
        return item.code == tabCode;
      });
      if (!findTab) {
        me.tabs.push({
          id: findRes.id,
          name: findRes.title ? findRes.title : findRes.name,
          parentId: findRes.parentId,
          code: findRes.code,
          resPath: findRes.resPath,
          extraData: findRes.extraData,
          view: findRes.isView
        });
      }
      me.curComponent = resolve =>
        require([`@/views/${findRes.resPath}`], resolve);
      me.extraData = findRes.extraData;
      me.view = findRes.isView;
      me.activeTab = tabCode;
    }
  }
};
</script>

<style scoped>
.tabs-header {
  padding: 0;
  height: 40px;
  background: #f0f0f0;
}
.tags-nav {
  position: relative;
  border-top: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
}
.size,
.tags-nav {
  width: 100%;
  height: 100%;
}
.tags-nav .btn-con,
.tags-nav .close-con {
  position: absolute;
  top: 0;
  height: 100%;
  background: #fff;
  z-index: 10;
}
.tags-nav .close-con {
  right: 0;
  width: 32px;
  text-align: center;
}
.tags-nav .btn-con {
  background: #fff;
  width: 27px;
  cursor: pointer;
  text-align: center;
  height: 100%;
}
.tags-nav .btn-con.left-btn {
  left: 0;
}
.tags-nav .btn-con.right-btn {
  right: 32px;
  border-right: 1px solid #f0f0f0;
}
.tags-nav .scroll-outer {
  position: absolute;
  left: 28px;
  right: 61px;
  top: 0;
  bottom: 0;
  -webkit-box-shadow: 0 0 3px 2px hsla(0, 0%, 39.2%, 0.1) inset;
  box-shadow: inset 0 0 3px 2px hsla(0, 0%, 39.2%, 0.1);
}
.tags-nav .scroll-outer .scroll-body {
  height: calc(100% - 1px);
  display: inline-block;
  padding: 1px 4px 0;
  position: absolute;
  overflow: visible;
  white-space: nowrap;
  -webkit-transition: left 0.3s ease;
  transition: left 0.3s ease;
}
.tab-title {
  display: inline-block;
  margin: 2px 4px 2px 0;
  padding: 0 8px;
  border: 1px solid #e8eaec;
  border-radius: 3px;
  background: #f7f7f7;
  font-size: 12px;
  vertical-align: middle;
  opacity: 1;
  overflow: hidden;
  cursor: pointer;
  height: 32px;
  line-height: 32px;
  border: 1px solid #e8eaec !important;
  color: #515a6e !important;
  background: #fff !important;
  padding: 0 12px;
}
.tab-dot-inner {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 8px;
  border-radius: 50%;
  background: #e8eaec;
  position: relative;
  top: 1px;
}
.tab-dot-inner.primary {
  background: #2d8cf0;
}
.tab-text {
  color: #515a6e;
}
.tab-close {
  display: inline-block;
  font-size: 11px;
  -webkit-transform: scale(1.42857143) rotate(0deg);
  transform: scale(1.42857143) rotate(0deg);
  cursor: pointer;
  margin-left: 7px;
  color: #666;
  opacity: 0.66;
  top: -1px;
}
.tags-btn {
  margin-top: 10px;
}
.tab-nav-header {
  position: fixed;
  top: 60px;
  left: 65px;
  width: 100%;
  z-index: 699;
}
</style>
